<template>
  <div class="events">
    <!-- <el-button class="management-btn" type="primary">活动赛事管理</el-button> -->
    <vHead appPath="/events" appTitle="活动赛事"></vHead>
    <main class="events-main">
      <template v-if="$route.meta!=undefined&&$route.meta.hideNav==true">
        <router-view :key="Date.now()" />
      </template>
      <template v-else>
        <nav>
          <el-tabs v-model="eActive" @tab-click="handleClick">
            <el-tab-pane
              v-for="(item,index) of navData"
              :key="index"
              :label="item.label"
              :name="item.name"
            >
              <router-view />
            </el-tab-pane>
          </el-tabs>
        </nav>
      </template>
    </main>
    <vFoot />
  </div>
</template>
<script>
import vHead from "@/components/common/header";
import vFoot from '@/components/common/footer';

export default {
  components: {
    vHead,
    vFoot
  },
  data() {
    return {
      eActive: "0",
      //导航栏数据
      navData: [
        {
          label: "首页",
          name: "0"
        },
        {
          label: "校园活动",
          name: "1"
        },
        {
          label: "体育赛事",
          name: "2"
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.changeRoute();
  },
  watch: {
    // 路由变化的时候，也切换菜单选中高亮效果
    $route(to, from) {
      if (to != from) {
        this.changeRoute();
      }
    }
  },
  computed: {},
  methods: {
    // 导航点击切换页面
    handleClick(tab) {
      if (tab.name == "0") {
        this.$router.push("/events");
      } else if (tab.name == "1") {
        this.$router.push("/events/school");
      } else if (tab.name == "2") {
        this.$router.push("/events/sports");
      }
      this.eActive = tab.name;
    },
    // 根据路由地址设置菜单高亮
    changeRoute() {
      let path = this.$route.path;
      if (path == "/events" || path == "/events/") {
        this.eActive = "0";
      }
      if (path == "/events/school" || path == "/events/school/") {
        this.eActive = "1";
      }
      if (path == "/events/sports" || path == "/events/sports/") {
        this.eActive = "2";
      }
    }
  }
};
</script>
<style lang="scss">
.events {
  position: relative;
}
.management-btn {
  position: absolute;
  top: 22px;
  right: 40px;
  padding: 0;
  width: 120px;
  height: 36px;
}
.events-main {
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 124px);
  padding: 18px 0 40px;
  box-sizing: border-box;
  nav {
    .el-tabs__header {
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
      border-radius: 3px;
      background-color: #fff;
      margin: 0;
    }
    .el-tabs__nav-wrap {
      padding-left: 40px;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
    .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
    .el-tabs__item {
      height: 60px;
      line-height: 60px;
    }
  }
}

@import "./../../../assets/css/events.scss";
</style>